<template>
  <el-dialog :title="title" :visible.sync="open" width="60vw" append-to-body>
    <div
      style="
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 10px;
      "
    >
      {{ title }}
    </div>
    <el-form ref="fromW" :model="fromW" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="预警时间" prop="yjsj">
            {{ parseTime(fromW.yjsj) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预警类型" prop="yjlx">
            {{ getHandle(dict.type.warn_type, fromW.yjlx) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预警对象">
            {{ fromW.dxmc }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预警内容">
            {{ fromW.yjnr }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="预警级别" prop="yjjb">
            {{ fromW.yjjb }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="处理状态" prop="clzt">
            {{ getHandle(dict.type.warn_handle_status, fromW.clzt) }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="识别视频">
            <video
              v-if="fromW.yjsp"
              style="width: 100%"
              :src="realSrc(fromW.yjsp)"
              controls="controls"
              :autoplay="false"
              muted="muted"
            ></video>
            <div v-else>暂无识别视频</div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="识别图片">
            <template v-if="fromW.yjtpList && fromW.yjtpList.length > 1">
              <el-image
                v-for="(item, i) in fromW.yjtpList"
                :key="i"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item"
                :preview-src-list="fromW.yjtpList"
              >
              </el-image>
            </template>
            <template v-else>
              <image-preview
                v-if="fromW.yjtp"
                :src="realSrc(fromW.yjtp)"
                width="100%"
                height="27vh"
              ></image-preview>
              <div v-else>暂无识别图片</div>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <!--
      <el-form-item label="审核结果" prop="status">
        <el-radio-group v-model="fromW.status">
          <el-radio
            v-for="dict in shType"
            :key="dict.value"
            :label="dict.value"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item> -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="接收单位" prop="jsdw">
            <treeselect
              v-model="fromW.jsdw"
              :options="buMList"
              :show-count="true"
              placeholder="请选择接收单位"
              :disable-branch-nodes="true"
              :normalizer="tenantIdnormalizer"
            >
            </treeselect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="处理时限" prop="clsx">
            <el-date-picker
              type="date"
              placeholder="选择处理时限"
              v-model="fromW.clsx"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="审核意见" prop="clxq">
            <el-input v-model="fromW.clxq" placeholder="请输入审核意见" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核人" prop="xdr">
            <el-input
              v-model="fromW.xdr"
              placeholder="请输入审核人"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下达单位">
            <el-input
              v-model="fromW.xddwName"
              placeholder="请输入下达单位"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核时间" prop="xdsj">
            <el-input
              v-model="fromW.xdsj"
              placeholder="请输入审核时间"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="submit">派 发</el-button>
      <el-button @click="getSfWb">误 报</el-button>
    </div>
    <CustomDialog ref="customDialog" title="视频" type="video"></CustomDialog>
    <div
      style="position: absolute; top: 10px; right: 10px; cursor: pointer"
      @click="cancel"
    >
      <i style="color: #fff; font-size: 36px" class="el-icon-circle-close"></i>
    </div>
  </el-dialog>
</template>

<script>
import { isExternal } from "@/utils/validate";
import CustomDialog from "@/components/CustomDialog/index.vue";
import { deptTree, workOrderAdd } from "@/api/daping/daping";
import { updateEarlyWarning } from "@/api/system/earlyWarning";
// import { eventHandlePut, eventConserveOrgList } from "@/api/system/eventHandle";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { parseTime } from "@/utils/dateTime";
export default {
  dicts: ["warn_type", "warn_handle_status", "warn_yjlb"],
  name: "details",
  components: { CustomDialog, Treeselect },
  props: {
    title: {
      type: String,
      default: "",
    },

    type: {
      type: String,
      default: "img",
    },
  },
  data() {
    return {
      open: false,
      form: {},
      rules: {
        jsdw: [
          { required: true, message: "请选择接收单位", trigger: "change" },
        ],
        clsx: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
      tableList: [],
      shType: [
        { label: "暂存", value: "1" },
        { label: "上报", value: "2" },
        { label: "误报", value: "4" },
      ],
      tableData: [],
      treeForm: { isConserve: "0" },
      tableData2: [],
      fromW: {},
      buMList: [],
      treeOp: [],
      optionMData: [],
    };
  },
  computed: {},
  // watch: {
  //   form: {
  //     handler(newObj, old) {
  //       if (newObj) {
  //         let obj = JSON.parse(JSON.stringify(newObj));
  //         if (obj.pass) {
  //           this.tableList = this.tableData;
  //         } else {
  //           this.tableList = this.tableData2;
  //         }
  //         this.fromW = obj;
  //       }
  //     },
  //     immediate: true,
  //     // deep: true,
  //   },
  // },

  methods: {
    cancel() {
      this.open = false;
    },
    getInit(obj) {
      console.log(JSON.parse(JSON.stringify(obj)), "obj");
      // this.getEventConserveOrgList();
      this.getDeptTree();
      if (obj.status == "3") {
        this.shType = [
          { label: "上报", value: "1" },
          { label: "不通过", value: "0" },
        ];
      } else {
        this.shType = [
          { label: "暂存", value: "1" },
          { label: "上报", value: "2" },
          { label: "误报", value: "4" },
        ];
      }

      if (obj) {
        this.fromW = {
          ...obj,
          yjtpList: Array.isArray(obj.yjtp)
            ? obj.yjtp
            : obj.yjtp
            ? obj.yjtp.split(",")
            : "",
        };
        this.form = obj;
        this.userData = this.$store.state.user.user;
        this.fromW.xddw = this.userData.deptId;
        this.fromW.xddwName = this.userData.dept.deptName;
        this.fromW.xdr = this.userData.userName;
        this.fromW.xdrId = this.userData.userId;
        this.fromW.xdsj = parseTime(new Date());
        // this.form = { ...obj, level: obj.level.toString() };
      } else {
        this.fromW = {};
        this.form = {};
      }
    },
    realSrc(src) {
      if (!src) {
        return;
      }
      let real_src = src.split(",")[0];
      if (isExternal(real_src)) {
        return real_src;
      }
      return process.env.VUE_APP_BASE_API + real_src;
      // return this.src;
    },
    judgeVal(val, type) {
      let m = false;
      if (val instanceof Array) {
        m = true;
      }
      return m;
    },
    getVideo(video) {
      console.log(video);
      return require("@/assets/video/" + video + ".mp4");
    },
    getHandle(obj, item) {
      if (!item) {
        return;
      }
      let name = "";
      obj.map((val) => {
        if (val.value == item) {
          name = val.label;
        }
      });
      return name;
    },
    submitForm() {
      // updateHuanydtl(this.fromW).then((response) => {
      //   this.$modal.msgSuccess("审核成功");
      //   this.open = false;
      //   this.$parent.getList();
      // });
      this.$refs["fromW"].validate((valid) => {
        if (valid) {
          delete this.fromW.date;
          this.fromW.createTime = new Date(Date.UTC(this.fromW.date));
          this.getEventHandlePut();
        }
      });
    },
    submit() {
      this.$refs["fromW"].validate((valid) => {
        if (valid) {
          let formM = JSON.parse(JSON.stringify(this.fromW));
          // formM.createTime = new Date(Date.UTC(this.fromW.date));
          delete formM.date;
          delete formM.yjtpList;
          formM.yjid = formM.id;
          console.log("派发工单");

          workOrderAdd(this.fromW).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "派单成功！",
                type: "success",
              });
              this.open = false;
              this.$parent.getCallback();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getSfWb() {
      let obj = { id: this.fromW.id };
      obj.fbzt = 2;
      obj.clzt = 2;
      this.wbObj = obj;
      updateEarlyWarning(this.wbObj).then((res) => {
        if (res.code == 200) {
          // this.getBreak();
          this.$message({
            message: "处理为误报！",
            type: "success",
          });
          this.open = false;
          this.$parent.getCallback();
        }
      });
    },
    getDeptTree() {
      deptTree(this.treeForm).then((res) => {
        if (res.code == 200) {
          // console.log(res.data);
          this.buMList = res.data;
          this.optionMData = this.optionData(this.treeOp);
        }
      });
    },
    optionData(arr, result = []) {
      arr.forEach((item) => {
        result.push({ label: item.label, value: item.id });
        if (item.children && item.children.length !== 0) {
          this.optionData(item.children, result);
        }
      });
      return JSON.parse(JSON.stringify(result));
    },

    getEventHandlePut() {
      eventHandlePut(this.fromW).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("审核成功");
          this.open = false;
          this.$parent.getList();
        }
      });
    },
    getEventConserveOrgList() {
      eventConserveOrgList().then((res) => {
        this.buMList = this.handleTree(res.rows, "id", "pid");
      });
    },
    tenantIdnormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children,
      };
    },
    handleNodeClick(data) {
      this.$set(this.fromW, "approveOrg", data.orgName);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 8vh !important;
  background-color: transparent;
  .el-dialog__header {
    display: none;
  }
}
::v-deep .vue-treeselect__menu-container {
  color: #000;
}
::v-deep .el-form-item__label {
  color: #fff !important;
}
::v-deep .el-form-item__content {
  color: #fff !important;
}
::v-deep .el-input__inner,
.vue-treeselect .vue-treeselect__control {
  background: transparent !important;
  color: #fff !important;
}
::v-deep .el-dialog {
  background: rgba(1, 38, 50, 0.8) !important;
}
::v-deep .el-dialog__body {
  background: transparent !important;
  height: auto !important;
}
::v-deep .el-radio__label {
  color: #fff !important;
}
</style>
